<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .item button{
    position: fixed;
    margin: 40px;
  }

</style>
<style>
  body{
    margin: 0;
  }
  .box{
    height: 400px;
    border: 1px solid black;
    margin: 0px;
  }
  .grandPa{
    position: absolute;
    top: 100px;
    left: 100px;
    width: 360px;
    height: 360px;
    background-color: #ccc;
    overflow: hidden;
  }
  .parent{
    position: absolute;
    top: 30px;
    left: 30px;
    width: 300px;
    height: 300px;
    background: #999;
    overflow: hidden;
  }
  .son{
    position: absolute;
    top: 100px;
    left: 100px;
    width: 100px;
    height:100px;
    background-color: green;
  }

  .item{
    width: 100%;
    height: 9000px;
    border: black solid 1px;
  }
</style>
<body>
  <!-- <div class="box"></div>
  <button>点击</button>
  <br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br> -->
  <div class="grandPa">
    <div class="parent">
      <div class="son">sdfg</div>
    </div>
  </div>

</body>
<script>

  function getScrollOffset(){
    if(window.pageXOffset){
      return{
        left: window.pageXOffset,
        top: window.pageYOffset
      }
    }else{
      return{
        left: document.body.scrollLeft + document.documentElement.scrollLeft,
        top: document.body.scrollTop + document.documentElement.scrollTop,
      }
    }
  }

  // 获取可视宽高
  function getViewportSize(){
    if(window.innerWidth){
      return {
        width: window.innerWidth,
        height: window.innerHeight
      }
    }else{
      // 判断document.compatMode是不是怪异模式 BackCompat
      if(doucment.compatMode === "BackCompat"){
        return{
          width: document.body.clientWidth,
          height: document.body.clientHeight
        }
      }else{
        return{
          width: document.documentElement.clientWidth,
          height: doucment.documentElement.clientHeight
        }
        
      }
    }
  }

  // 
  function getScrollSize(){
    if(document.body.scrollWidth){
      return{
        width: document.body.scrollWidth,
        height: document.body.scrollHeight
      }
    }else{
      return{
        width: doucment.documentElement.scrollWidth,
        height: document.documentElement.scrollHeight
      }
    }
  }

  // 元素距离body的数值
  function getElemDocPosition(el){
    var parent = el.offsetParent,
        setleft = el.offsetLeft,
        settop = el.offsetTop;
    while(parent){
      setleft += parent.offsetLeft;
      settop += parent.offsetTop;
      parent = parent.offsetParent;
    }

    return {
      left: setleft,
      top: settop
    }
  }

  


  /**
   * 作业1
   * 完成点击回到顶部
   * 
   * 作业2
   * */ 



  

  
</script>
</html>